<template>
  <view class="home u-flex-col">
    <u-navbar :background="{ backgroundColor: 'rgb(61, 95, 255)' }" title="筛选" back-icon-color="#fff"
      title-color="#fff"></u-navbar>

    <view class="u-p-l-20 u-p-r-20 form">
      <u-form :model="form" ref="uForm">

        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="突出危险性"
          prop="isDanger">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.isDanger"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'isDanger')"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="自燃倾向性"
          prop="autoigntion">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.autoigntion"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'autoigntion')"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="煤尘爆炸性"
          prop="dustExplosion">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.dustExplosion"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'dustExplosion')"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="冲击地压危险性"
          prop="impingingDangerous">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.impingingDangerous"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'impingingDangerous')"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="水害"
          prop="waterDamage">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.waterDamage"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'waterDamage')"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="热害"
          prop="heatDamage">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.heatDamage"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'heatDamage')"></chooseBtn>
        </u-form-item>
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" label="三量可采期"
          prop="four">
          <chooseBtn :custom-box-style="customBoxStyle" :custom-style="customBtnStyle" :list="objList.four"
            :custom-check-style="customCheckStyle" @click="clickBtn($event,'four')"></chooseBtn>
        </u-form-item>
      </u-form>
    </view>
    <view class="u-flex u-row-between u-p-t-20">
      <u-button :hair-line="false" shape="circle" form-type="reset" :custom-style="formCustomStyle" throttle-time="500"
        @click="reset">重置</u-button>
      <u-button :hair-line="false" shape="circle" :custom-style="formSubmitStyle" form-type="submit" throttle-time="500"
        @click="submit">确定</u-button>
    </view>

  </view>
</template>

<script>
import chooseBtn from "@/pages/components/chooseBtn";

export default {
  name: "screen",
  components: {
    chooseBtn,
  },
  data () {
    return {
      form: {

      },
      customBoxStyle: {
        justifyContent: "space-start",
      },
      // 按钮组组件样式
      customBtnStyle: {
        background: "#fff",
        border: "1px solid #fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        fontWeight: 400,
        color: "#666666",
      },
      customCheckStyle: {
        background: "#fff",
        padding: "0rpx 20rpx",
        marginRight: "20rpx",
        borderRadius: "32rpx",
        border: "1px solid #288CFE",
        fontWeight: 400,
        color: "#288CFE",
      },
      // 按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      objList: {},
      labelStyle: {
        color: "#333333",
        fontWeight: "600",
      },
      formCustomStyle: {
        color: "#000",
        border: "1rpx solid #ddd",
        background: "#fff",
        width: "40%",
      },
      formSubmitStyle: {
        color: "#ffffff",
        background: "#288CFE",
        width: "40%",
        border: "none",
      },
    };
  },
  async mounted () {

  },
  methods: {
    getLabels(){
      this.$post('/cjt/app/getLabels').then(res=>{
        this.objList = res.body
        this.init()
      })
    },
    init () {
      for (const key in this.objList) {
        this.objList[key].forEach(el => {
        if (this.form[key]?.includes(el.id)) {
          el.checked = true
        } else {
          el.checked = false
        };
      });
      }
    },
    //按钮方法
    clickBtn (res,name) {
      if(res&&res.length){
        this.form[name]=res.map(item=>item.id).join(',')
      }else{
        this.form[name]=''
      }
    },
    submit () {
      const params = {
        ...this.form,
      }
      uni.$emit(this.emitEvent, params)
      uni.navigateBack({
        delta: 1
      })
    },
    reset () {
      this.form = {
        ...this.form,
        isDanger:'',
        autoigntion:'',
        dustExplosion:'',
        impingingDangerous:'',
        waterDamage:'',
        heatDamage:'',
        four:''
      }
      this.init();
    },
  },

  onLoad (options) {
    const { form, emitEvent } = options
    const obj = JSON.parse(form)
    this.form = { ...this.form, ...obj }
    this.emitEvent = emitEvent
    this.getLabels()
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .form {
    /deep/.u-form-item {
      padding: 0;
    }

    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }

  }

  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 20rpx;
    z-index: 1;
  }
}

.time-body {
  position: relative;
  width: 100%;
}
/deep/ .box {
  .tag{
  margin-top: 5px;
}
}
</style>
